<!DOCTYPE html>
<html lang="en-us">
<head>
	<meta charset="utf-8">
	<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->

	<title> 车辆轨迹回放 </title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Use the correct meta names below for your web application
		 Ref: http://davidbcalhoun.com/2010/viewport-metatag 
		 
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">-->
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<!-- Basic Styles -->
	<link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="../../css/font-awesome.min.css">

	<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
	<link rel="stylesheet" type="text/css" media="screen" href="../../css/smartadmin-production.css">
	<link rel="stylesheet" type="text/css" media="screen" href="../../css/smartadmin-skins.css">
    
	<!-- G7 fix -->
	<link rel="stylesheet" type="text/css" media="screen" href="../../css/demo-increase.css">
    
	<!-- SmartAdmin RTL Support is under construction
	<link rel="stylesheet" type="text/css" media="screen" href="../../css/smartadmin-rtl.css"> -->
	<!-- daterangepicker Styles  -->
	<link rel="stylesheet" type="text/css" media="screen" href="../../css/daterangepicker-bs3.css">
	
	<link rel="stylesheet" type="text/css" media="screen" href="../../js/plugin/splite/split-pane.css">
	<!-- FAVICONS -->
	<link rel="shortcut icon" href="../../img/favicon/favicon.ico" type="../../image/x-icon">
	<link rel="icon" href="../../img/favicon/favicon.ico" type="../../image/x-icon">
	
	<style type="text/css">
		html, body {
			height: 100%;
			min-height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}

		div.decoration {
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			background: white;
			width: 100%;
			height: 100%;
			padding: 0;
			overflow: hidden;
			position: relative;
		}
		#mapDiv{
			position: absolute;
			top:0;
			bottom: 0;
			right: 0;
			left: 0;
			width: 100%;
			background: #CEDDF2;
			overflow: hidden;
		}
		#alertDiv{
			position: absolute;
			bottom: -288px;
			left: -1px;
			right: -1px;
			background: #fff;
			height: 320px;
		}
		#left-component {
			width:320px;
			min-width: 320px;
		}

		#vertical-divider {
			left: 320px;
			width: 5px;
			background: #CCDADF;
			border-right:1px solid #92A2A8;
			border-left:1px solid #92A2A8;
		}

		#right-component {
			left:320px;
			margin-left: 5px;
		}
		.overHidden{
			overflow: hidden!important;
		}

		.alertOpen{
			bottom:-1px!important;
		}
		.map-leftList{padding-top:142px;}
		.map-leftList .searchBox{position:absolute;top:0;left:0;right:0;z-index:10}
		#leftToggleBtn{position:absolute;top:50%;bottom:50%;left:-1px; margin-top:-32px; width:14px; height:64px; background:#9EB9C2; border:1px solid #92A2A8; border-left:none; line-height:64px; z-index:10}

		.hideLeftCom #left-component, .hideLeftCom #vertical-divider,.hideSearchOp{display: none;}
		.hideLeftCom #right-component{left: 0!important;margin-left: 0!important;}
		.hideLeftCom #leftToggleBtn{width: 17px!important;}

		
		/*回放按钮位置*/
		.playSlider{height:50px;position:relative}


	</style>
</head>
<body onload="initialize()">
<section id="widget-grid">
	<!-- row -->
	<div class="row">
		<!-- NEW WIDGET START -->
		<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget jarviswidget-color-blueLight no-margin" id="wid-id-0" data-widget-sortable="true" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false">
				<header>
					<span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2> 车辆轨迹回放 </h2>
				</header>
				<!-- widget div-->
				<div>
					<!-- widget content -->
					<div class="widget-body no-padding" id="mapDataBody">
						<div class="split-pane fixed-left" id="split-pane-1">
							<div class="split-pane-component" id="left-component">
								<div class="decoration">
									<div class="padding-10" style="border-bottom:1px solid #ccc">
										<!-- <table class="smart-form" width="100%">
											<tr>
												<td width="60px">车牌号</td>
												<td>
													<section class="margin-bottom-5">
														<label class="input">
															<input type="text" class="input-sm" name="tid" placeholder=""  id="e5">
														</label>
													</section>
												</td>
											</tr>
											<tr>
												<td width="60px">回放时间</td>
												<td>
													<section class="margin-bottom-5">
													<label class="input">
														<i class="icon-prepend fa fa-calendar"></i>
														<input name="in_date" class="input-sm" type="text" id="startTime" value="2014-02-01" maxlength="10">
													</label>
												</section>
												</td>
											</tr>
											<tr>
												<td width="60px"></td>
												<td>
													<section class="no-margin">
													<label class="input">
														<i class="icon-prepend fa fa-calendar"></i>
														<input name="in_date" class="input-sm" type="text" id="endTime" value="2014-02-01" maxlength="10">
													</label>
												</section>
												</td>
											</tr>
											
											<tr>
												<td width="75px"></td>
												<td>
													<a class="btn btn-primary  btn-sm"  hrer="#">搜索</a>
													<a id="more_search" class="btn btn-sm  btn-default" hrer="#">更多条件</a>
												</td>
											</tr> 
										</table> -->
										<table class="smart-form" width="100%">
											<tr>
												
												<td>
													<section class="margin-bottom-5">
														<label class="input">
															<i class="icon-prepend fa fa-truck"></i>
															<input type="text" class="input-sm" name="tid" placeholder="车牌号" value="粤B92350"  id="e5">
														</label>
													</section>
												</td>
											</tr>
											<tr>
												<td >
													<section class="margin-bottom-5">
													<label class="input">
														<i class="icon-prepend fa fa-calendar"></i>
														<input name="in_date" class="input-sm" type="text" id="startTime" value="2014-02-01 09:32-2014-02-03 18:26" maxlength="10">
													</label>
												</section>
												</td>
											</tr>
										</table>
									</div>
									<div class="row padding-10">
										<div class="col-xs-12 ">
											回放速度：
											<select class="">
													<option value="AK">正常</option>
													<option value="AK">快速</option>
													<option value="AK">最快</option>
													<option value="AK">慢速</option>
											</select>
											回放间隔：
											<select class="">
													<option value="AK">10秒</option>
													<option value="AK">30秒</option>
													<option value="AK">60秒</option>
													<option value="AK">5分钟</option>
											</select>
										</div>
										<!-- <div class="col-xs-3 text-right">
											<a class="btn btn-danger btn-sm pull-right" hrer="#" title="播放" style="width:80%;"> <i class="fa fa-play"></i> </a>
										</div> -->
										<hr />
										<div class="col-xs-12 playSlider">
											<div class="margin-bottom-10">384.81 km/1594.95 km
												<a class="btn btn-danger btn-xs pull-right" style="width:60px;height:24px;" href="javascript:playReview();"  title="播放" id="replayBtn"> <i class="fa fa-play"></i> </a>
											</div>
											<input type="text" style="display:none" class="slider slider-default" id="sa3" value="" 
											data-slider-min="0" 
											data-slider-max="5232"  
											data-slider-value="2000" 
											data-slider-selection = "before"
											data-slider-handle="squar">
											
											<!-- <div class="form-group">
												<input id="range-slider-1" type="text" name="range_1" value="">
											</div> -->
										</div>
									</div>
									<section id="widget-grid" style="margin:0 -1px">
										<div id="wid-id-1" class="jarviswidget jarviswidget-sortable" data-widget-deletebutton="false" data-widget-togglebutton="false" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-sortable="false" data-widget-fullscreenbutton="false">
												<header role="heading">
													<ul class="nav nav-tabs pull-left in">
														<li class="active">
															<a href="#hr11" data-toggle="tab"> <span> 停留点 </span> </a>
														</li>
														<li>
															<a href="#hr22" data-toggle="tab"> <span> 轨迹点  </span> </a>
														</li>
													</ul>
													<!-- <div class="widget-toolbar" role="menu">
														<button class="btn btn-default btn-xs " id="leftToggleBtn">
															<i class="fa  fa-chevron-left"></i>
														</button>
													</div> -->
													<span class="jarviswidget-loader"><i class="fa fa-refresh fa-spin"></i></span>
												</header>

												<!-- widget div-->
												<div role="content" class="no-padding">
													<!-- widget edit box -->
													<div class="jarviswidget-editbox">
													</div>
													<!-- end widget edit box -->

													<!-- widget content -->
													<div class="widget-body">								
														<!-- <div class="widget-body-toolbar bg-color-white" >
														</div> -->
														<div class="tab-content">
															<div id="hr11" class="tab-pane active">
																<div  class="widget-body-toolbar bg-color-white searchBox">
																	<div class="pull-left">过滤 <input type="text" size=2 /> 分钟以下停留，</div><button type="button" style="display:inline-block">过滤</button>
																</div>
																<table id="dt_basic2" class="table  table-hover has-tickbox">
																	<thead>
																		<tr>
																			<th>序号</th>
																			<th>停留开始</th>
																			<th>停留时长</th>
																			<th>停留位置</th>
																		</tr>
																	</thead>
																	<tbody>
										                            	<tr>
																			<td>1</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>2</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>3</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>4</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>1</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>5</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>6</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>7</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>8</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>9</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>10</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>11</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>12</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>13</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>14</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>15</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>16</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>17</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>18</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>19</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>20</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>
																		<tr>
																			<td>21</td>
																			<td>01-11 06:40:32</td>
																			<td>30分40秒</td>
																			<td><a href="#" ><div class="onOverHide">广东省深圳市宝安区建安路30 离兰翠华路333米</div></a></td>
																		</tr>

																	</tbody>
																</table>
															</div>
															<div id="hr22" class="tab-pane">
																<div  class="widget-body-toolbar bg-color-white searchBox">
																	<a class="btn btn-xs btn-default" href="#">导出轨迹点</a>
																</div>
																<table id="dt_basic3" class="table table-hover has-tickbox">
																	<thead>
																		<tr>
																			<th>序号</th>
																			<th>gps时间</th>
																			<th>车速</th>
																			<th>位置</th>
																		</tr>
																	</thead>
																	<tbody>
										                            	<tr>
																			<td>1</td>
																			<td>02-28 00:00:51</td>
																			<td>71km/h</td>
																			<td><a href="#">显示位置</a></td>
																		</tr>
																		<tr>
																			<td>2</td>
																			<td>02-28 00:00:51</td>
																			<td>71km/h</td>
																			<td><a href="#">显示位置</a></td>
																		</tr>
																		<tr>
																			<td>3</td>
																			<td>02-28 00:00:51</td>
																			<td>71km/h</td>
																			<td><a href="#">显示位置</a></td>
																		</tr>
																		<tr>
																			<td>4</td>
																			<td>02-28 00:00:51</td>
																			<td>71km/h</td>
																			<td><a href="#">显示位置</a></td>
																		</tr>
																	</tbody>
																</table>							
															</div>
														</div>
														<!-- end tab-content -->
													</div>
													<!-- end widget content -->

												</div>
												<!-- end widget div -->
										</div>
									</section>
								</div>
							</div>
							<div class="split-pane-divider" id="vertical-divider">
								<div style="position:relative;height:100%;">
									<div style="height:64px;width:4px; background:#9EB9C2;position:absolute; top:50%;margin-top:-32px;"></div>
								</div>
							</div>
							<div class="split-pane-component overHidden" id="right-component">
								<div class="decoration" id="asd">
									<div id="mapDiv"></div>
									<div style="position:absolute; top:120px; right:300px; width:240px">
										<div class="panel panel-primary" id="taskPanel" style="position:relatvie">
									        <div class="panel-heading padding-5" >
									        	<i class="fa fa-angle-double-right "></i> 京H34324
									        </div>
									        <div class="panel-body padding-5" style="background:#B2D0FE">
									        	<table style="line-height:18px;">
									        		<tr>
									        			<td align="right">司机：</td>
									        			<td>李国豪</td>
									        		</tr>
									        		<tr>
									        			<td align="right">所属机构：</td>
									        			<td>常州甩挂车队</td>
									        		</tr>
									        		<tr>
									        			<td align="right">车长/车型：</td>
									        			<td>6.9米</td>
									        		</tr>
									        		<tr>
									        			<td align="right">速度：</td>
									        			<td>64KM/H</td>
									        		</tr>
									        		<tr>
									        			<td align="right">GPS时间：</td>
									        			<td>2014-03-09 00:04:00</td>
									        		</tr>
									        		<tr>
									        			<td align="right">回放里程：</td>
									        			<td>3.72 千米/1449.3 千米</td>
									        		</tr>
									        	</table>
									        	
									        </div>
									        <img src="../../img/g7/iw_tail.png" style="z-index: 1; position: absolute; width: 60px; height: 29px; left: 50%; right:50%; margin-left:-29px; bottom: -29px;">
										</div>
									</div>
									<div style="position:absolute; top:5px; right:5px;z-index:2;">
										<form role="search" class="navbar-form no-margin pull-left pull-width240">
											<div class="input-group">
												<input type="text" placeholder="搜索地址..." class="form-control">
												<div class="input-group-btn">
													<button type="button" class="btn btn-sm btn-default btn-primary">
														<i class="fa fa-sm fa-search"></i>
													</button>
												</div>
											</div>
										</form>
										<div class="btn-group">
											<a href="#" class="btn btn-default btn-sm active"> <span class="glyphicon glyphicon-move"></span></a>
											<a href="#" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-globe"></span></a>
											<a href="#" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-road"></span></span></a>
											<a href="#" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-check"></span></a>
										</div>
										<div class="btn-group">
											<a href="#" class="btn btn-default btn-sm"> 路况 </a>
											<a href="#" class="btn btn-default btn-sm"> 卫星 </a>
										</div>

									</div>
									<!-- 地图显示设置弹框 -->
									<div id="subscription-btn">
										<a class="btn btn-sm btn-warning" href="javascript:void(0);" title="地图显示设置"><i class="fa fa-eye"></i> 地图级别 7</a>
									</div>
									
									<div class="jarviswidget jarviswidget-color-blueDark" id="showMapSetting"  data-widget-deletebutton="false" data-widget-togglebutton="false" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-sortable="true" data-widget-fullscreenbutton="false">
										<header>
											<div class="jarviswidget-ctrls">
												<a class="button-icon" href="javascript:void(0);" id="subscription-close" ><i class="fa fa-times"></i></a></div>
											<h2>地图级别：<b>7</b></h2>
										</header>
										<div role="content">
											<div class="widget-body no-padding">
												<form action="" class="">
													<div class="mapSetting widget-body-toolbar">
															<span class="onoffswitch-title"><b>车辆显示：</b></span>
															<span class="onoffswitch">
																<input checked="checked" type="checkbox" id="myonoffswitch1" class="onoffswitch-checkbox" name="onoffswitch1">
																<label for="myonoffswitch1" class="onoffswitch-label"> 
																	<div data-swchoff-text="隐藏" data-swchon-text="显示" class="onoffswitch-inner"></div> 
																	<div class="onoffswitch-switch"></div>
																</label> 
															</span>
															<div class="pull-right drop-down">
																<select id="s4a" class="s4a " multiple="multiple">
														            <option selected="selected">全部车辆(56)</option>
														            <option>行驶(23)</option>
														            <option>静止(11)</option>
														            <option>离线(22)</option>
														        </select>
															</div>
													</div>
													<div class="mapSetting widget-body-toolbar bg-color-white">
														<div class="row">
															<section class="col col-xs-12">
																<label class="input pull-left">
																	<input type="checkbox" checked="checked" class="checkbox style-0">
																	<span>以聚合方式显示车辆</span>
																</label>
															</section>
														</div>
														<div class="row">
															<section class="col col-xs-12">
																<label class="input">
																	<input type="checkbox" class="checkbox style-0">
																	<span>显示车牌</span>
																</label>
																<div class="pull-right">
																	<label class="">地图级别大于：</label>
																	<div class="btn-group dropup">
								                                            <button class="btn btn-default btn-xs dropdown-toggle no-margin pull-width40 disabled" data-toggle="dropdown"> 7级 </button>
								                                            <div class="dropdown-menu map-rank">
								                                                <input type="text" class="slider slider-danger" value="" 
																                  data-slider-min="7" 
																                  data-slider-max="16" 
																                  data-slider-step="1" 
																                  data-slider-value="10" 
																                  data-slider-orientation="vertical" 
																                  data-slider-selection="after" 
																                  data-slider-handle="square" 
																                  data-slider-tooltip="hide">
								                                            </div>
																	</div>
																</div>
															</section>
														</div>
													</div>
													<div class="mapSetting widget-body-toolbar">
														<span class="onoffswitch-title"><b>标注显示：</b></span>
														<span class="onoffswitch">
															<input checked="checked" type="checkbox" id="myonoffswitch2" class="onoffswitch-checkbox" name="onoffswitch1">
															<label for="myonoffswitch2" class="onoffswitch-label"> 
																<div data-swchoff-text="隐藏" data-swchon-text="显示" class="onoffswitch-inner"></div> 
																<div class="onoffswitch-switch"></div>
															</label> 
														</span>
														<div class="pull-right drop-down">
															<select id="s5" class="s5 " multiple="multiple">
													            <option selected="selected">全部标注</option>
													            <option>站点(56)</option>
													            <option>营业网点(234)</option>
													            <option>固定客户(12)</option>
													        </select>
														</div>
													</div>
													<div class="mapSetting widget-body-toolbar bg-color-white">
														<div class="row">
															<section class="col col-xs-12">
																<div class="pull-right">
																	<label class="">地图级别大于：</label>						
																	<div class="btn-group dropup">
																		<button class="btn btn-default btn-xs dropdown-toggle no-margin pull-width40" data-toggle="dropdown"> 12级 </button>
																		<div class="dropdown-menu map-rank">
																			<input type="text" class="slider slider-danger" value="" 
																				data-slider-min="7" 
																				data-slider-max="16" 
																				data-slider-step="1" 
																				data-slider-value="10" 
																				data-slider-orientation="vertical" 
																				data-slider-selection="after" 
																				data-slider-handle="square" 
																				data-slider-tooltip="hide">
																		</div>
																	</div>
																</div>
															</section>
														</div>
													</div>
												</form>
											</div>
										</div>
									</div>
									<!-- 弹框end -->
									<!-- <button class="btn btn-primary btn-xs " id="">
										<i class="fa fa-chevron-right"></i>
									</button> -->

									<a href="#" id="leftToggleBtn" class="btn no-padding" ><i class="fa fa-caret-left"></i></a>
								</div>
								
							</div>
						</div>
					</div>
					<!-- end widget content -->
				</div>
				<!-- end widget div -->
			</div>
			<!-- end widget -->

		</article>
		<!-- WIDGET END -->
	</div>
	<!-- end row -->
</section>




<!--================================================== -->

	<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)
	<script data-pace-options='{ "restartOnRequestAfter": true }' src="../../js/plugin/pace/pace.min.js"></script>-->

	<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
	<script src="../../js/libs/jquery-2.0.2.min.js"></script>
	<script>
		if (!window.jQuery) {
			document.write('<script src="../../js/libs/jquery-2.0.2.min.js"><\/script>');
		}
	</script>

	<script src="../../js/libs/jquery-ui-1.10.3.min.js"></script>
	<script>
		if (!window.jQuery.ui) {
			document.write('<script src="../../js/libs/jquery-ui-1.10.3.min.js"><\/script>');
		}
	</script>

	<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
	<script src="../../js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->

	<!-- BOOTSTRAP JS -->
	<script src="../../js/bootstrap/bootstrap.min.js"></script>

	<!-- CUSTOM NOTIFICATION -->
	<script src="../../js/notification/SmartNotification.min.js"></script>

	<!-- JARVIS WIDGETS -->
	<script src="../../js/smartwidgets/jarvis.widget.min.js"></script>

	<!-- EASY PIE CHARTS -->
	<script src="../../js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

	<!-- SPARKLINES -->
	<script src="../../js/plugin/sparkline/jquery.sparkline.min.js"></script>

	<!-- JQUERY VALIDATE -->
	<script src="../../js/plugin/jquery-validate/jquery.validate.min.js"></script>
	<script src="../../js/plugin/jquery-validate/localization/messages_zh.js"></script>
	
	<!-- JQUERY MASKED INPUT -->
	<script src="../../js/plugin/masked-input/jquery.maskedinput.min.js"></script>

	<!-- JQUERY SELECT2 INPUT -->
	<script src="../../js/plugin/select2/select2.min.js"></script>

	<!-- JQUERY UI + Bootstrap Slider -->
	<script src="../../js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

	<!-- browser msie issue fix -->
	<script src="../../js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

	<!-- SmartClick: For mobile devices -->
	<script src="../../js/plugin/smartclick/smartclick.js"></script>

	<script src="../../js/plugin/splite/split-pane.js"></script>

	<script src="../../js/plugin/date/moment.js"></script>
	<script src="../../js/plugin/date/daterangepicker.js"></script>

	<!--[if IE 7]>

	<h1>你的浏览器版本太低，为了您正常使用本系统，请到此处升级浏览器版本 www.microsoft.com/download</h1>

	<![endif]-->

	<!-- Demo purpose only -->
	<script src="../../js/demo.js"></script>

	<!-- MAIN APP JS FILE -->
	<script src="../../js/app2.js"></script>
	<script type="text/javascript" src="../../js/plugin/iresizer/iframeResizer.contentWindow.min.js"></script> 

	<!-- Include the DropDownCheckList supoprt -->
    <script src="../../js/plugin/selectCheckbox/ui.dropdownchecklist-1.4-min.js"></script>
	<script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;sensor=false" type="text/javascript"></script> 
	

	<!-- Your GOOGLE ANALYTICS CODE Below -->
	<script type="text/javascript">
		pageSetUp();
	
	$(function() {
		loadDataTableScripts();//数据表格初始化
		$('div.split-pane').splitPane();//界面左右分割
		//$.root_.css('min-height', '400px');//控制body的最小高度，引用app.js中的参数
		parent.closeLeftPanel();//调用父页面方法，隐藏父级页面的左侧菜单

		$('#startTime , #endTime').daterangepicker({ 
			singleDatePicker: true, //必须要有默input 认value
			//timePicker: true,		//是否启用时间选择
			timePickerIncrement:10,	//分钟选择的间隔
			format: 'YYYY-MM-DD',	//返回值的格式
			//timePicker12Hour: false,	//采用24小时计时制
			showDropdowns: true,		//是否显示年、月下拉框
		});

		
		
	});

	function playReview(){	
		$("#replayBtn").toggleClass("btn-danger btn-warning");
		$("#replayBtn i").toggleClass("fa-play fa-pause");
	}
	
	function loadDataTableScripts() {

		loadScript("../../js/plugin/datatables/jquery.dataTables-cust.min.js", dt_2);

		function dt_2() {
			loadScript("../../js/plugin/datatables/ColReorder.min.js", dt_3);
		}

		function dt_3() {
			loadScript("../../js/plugin/datatables/FixedColumns.min.js", dt_4);
		}

		function dt_4() {
			loadScript("../../js/plugin/datatables/ColVis.min.js", dt_5);
		}

		function dt_5() {
			loadScript("../../js/plugin/datatables/ZeroClipboard.js", dt_6);
		}

		function dt_6() {
			loadScript("../../js/plugin/datatables/media/js/TableTools.min.js", dt_7);
		}

		function dt_7() {
			loadScript("../../js/plugin/datatables/DT_bootstrap.js", runDataTables);
		}

	}

	function runDataTables() {

		$('#dt_basic2').dataTable({
			"sPaginationType" : "bootstrap",
			"bFilter": false,
			"aaSorting": [[ 1, "asc" ]],
			"aoColumns": [
			{ "bSortable": false},
			null,
			null,
			{ "bSortable": false}
			],
			"bInfo": false,//页脚信息
			"bScrollAutoCss": true,
			"bScrollCollapse": true,
			"iDisplayLength": 15, //每页显示数据量
			"bLengthChange": false, // 用户不可改变每页显示数量
			"bProcessing": true, // 是否启用进度显示，进度条等等，对处理大量数据很有用处。// 默认值：false
			//"bStateSave": true, // 保存状态到cookie
			"oLanguage": {
			"sZeroRecords": "抱歉， 没有找到",
			"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
			"sInfoEmpty": "没有数据",
			"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
			"oPaginate": {
			"sFirst": "<<",
			"sPrevious": "<",
			"sNext": ">",
			"sLast": ">>"
			},
			"sZeroRecords": "没有检索到数据",
			"sProcessing": "<img src='./loading.gif' />"
			},
			"fnDrawCallback": function(oSettings) {
				$(this).css('width','100%');
				$(this).find('tbody tr.even').css('backgroundColor', '#FFF');
     			$(this).find(".btn-group").slice(-5).addClass('dropup');
                $(this).find(".btn-group").slice(0,3).removeClass('dropup');
                $(this).find("th,td").css('white-space', 'nowrap');
                $(oSettings.nTable).find("tr:last td").css({"border-bottom": '1px solid #DDDDDD'});  
                 var dtFather=$(this).parent(".dt-wrapper");
                 var reH=$(window).height()-398;
                dtFather.css({'overflow': 'auto','min-height': '200px','background': '#f9f9f9',"height":reH,"overflow":"auto"});//初始化表格高度
			    
				//dtFather.next().children(".row").children(":lt(2)").remove();
				dtFather.next().children(".row").children(":last").removeClass('col-sm-7').addClass("col-sm-12");

			}
		});
		$('#dt_basic3').dataTable({
			"sPaginationType" : "bootstrap",
			"bFilter": false,
			"aaSorting": [[ 1, "desc" ]],
			"aoColumns": [
			{"asSorting": [ ]},
			null,
			null,
			{"asSorting": [ ]}
			],
			"bInfo": false,//页脚信息
			"bScrollAutoCss": true,
			"bScrollCollapse": true,
			"iDisplayLength": 15, //每页显示数据量
			"bLengthChange": false, // 用户不可改变每页显示数量
			"bProcessing": true, // 是否启用进度显示，进度条等等，对处理大量数据很有用处。// 默认值：false
			//"bStateSave": true, // 保存状态到cookie
			"oLanguage": {
			"sZeroRecords": "抱歉， 没有找到",
			"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
			"sInfoEmpty": "没有数据",
			"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
			"oPaginate": {
			"sFirst": "<<",
			"sPrevious": "<",
			"sNext": ">",
			"sLast": ">>"
			},
			"sZeroRecords": "没有检索到数据",
			"sProcessing": "<img src='./loading.gif' />"
			},
			"fnDrawCallback": function(oSettings) {
				$(oSettings.nTable).css('width','100%');
				$(oSettings.nTable).find('tbody tr.even').css('backgroundColor', '#FFF');
     			$(oSettings.nTable).find(".btn-group").slice(-5).addClass('dropup');
                $(oSettings.nTable).find(".btn-group").slice(0,3).removeClass('dropup');
                $(oSettings.nTable).find("th,td").css('white-space', 'nowrap');
                $(oSettings.nTable).find("tr:last td").css({"border-bottom": '1px solid #DDDDDD'});  
                 var dtFather=$(oSettings.nTable).parent(".dt-wrapper");
                 var reH=$(window).height()-398;
                dtFather.css({'overflow': 'auto','min-height': '200px','background': '#f9f9f9',"height":reH,"overflow":"auto"});//初始化表格高度
			    
				//dtFather.next().children(".row").children(":lt(2)").remove();
				dtFather.next().children(".row").children(":last").removeClass('col-sm-7').addClass("col-sm-12");

			}
		});

		// $('div.dt-bottom-row div div.text-right').removeClass('col-sm-6')
		// $('div.dt-bottom-row div div.text-right').addClass('col-sm-12')
	}

	//下为地图界面自适应高度,被门户调用的实现方式
	function mapAutoHeight(pHeight){
		var tables = $('#dt_basic2,#dt_basic3').parent('.dt-wrapper');
		//var pbodyHeight=$(window.parent.document.body).height();
		//var wHeight = $(window).height();
		var selfWindowHeight = $(window).height();
		var mapHeight;
		if(pHeight == null){
			mapHeight = selfWindowHeight-34;
			//$("#wid-id-0 a.jarviswidget-fullscreen-btn").hide();
		}else{
			mapHeight = pHeight-150;
			//$("#wid-id-0 a.jarviswidget-fullscreen-btn").show();
		}
		$("#mapDataBody").css({"height":mapHeight,"min-height":"500px"});

		var dtHeight = mapHeight-364;
		tables.css("height",dtHeight);
		console.log(selfWindowHeight+"px"+","+mapHeight+"px"+","+pHeight+"px");
	}
	var parentHeight = null;
	mapAutoHeight(parentHeight);
	parent.resize = $(window).resize(function(){
		mapAutoHeight(parentHeight);
		//resizeTableHeight();
	})

	$("a.jarviswidget-fullscreen-btn").bind("click",function(){
		parent.iframeFullScreen();
		parent.resizeMapHeight();
		return false;//停止smartwidgets脚本的执行，以免全屏产生冲突
	})

	//左侧表格自适应高度
	// function resizeTableHeight(){
	// 	var dtHeight=$(window).height()-414;
	// 	$(".dt-wrapper").css("max-height",dtHeight);
	// }

	//控制左侧隐藏
	$("#leftToggleBtn").click(function(){
		$("#split-pane-1").toggleClass("hideLeftCom")
		$(this).find("i").toggleClass("fa-caret-right");
	})

	
	$("#more_search").click(function(){
		$("#hiddedtr").toggleClass("hideSearchOp");
	})

	$(function() {
		$("#e5").select2({
		    placeholder: "输入车牌号查询",
			allowClear: true,
		    minimumInputLength: 1,
		    data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
		});
	});

	/*调用地图*/
	function initialize() {
	  if (GBrowserIsCompatible()) {
	    var map = new GMap2(document.getElementById("mapDiv"));
	    map.setCenter(new GLatLng(23.049573, 113.761221), 8);
	    map.addControl(new GLargeMapControl3D());
				map.addControl(new GScaleControl());
				//map.addControl(new GMapTypeControl());
	  }
	// Create our "tiny" marker icon
		
	}

	//地图显示设置弹窗弹出
	$("#subscription-btn").click(function(){
		$(this).hide();
		$("#showMapSetting").animate({right: '5px'}, "fast");
	})
	//点击关闭按钮右移隐藏
	$("#subscription-close").click(function(){
		$("#showMapSetting").animate({right: '-350px'}, "fast",function(){
			$("#subscription-btn").show();
		});
	})
	
	// 地图设置下拉多选1
	$("#s4a").dropdownchecklist({
		firstItemChecksAll: true,
		//emptyText: "显示车辆", 
		icon: { 
			placement: 'right', 
			toOpen: 'fa fa-caret-down', 
			toClose: 'fa fa-caret-up' 
		}, 
		maxDropHeight: 102, 
		width: 120 ,
		onComplete: function(selector) {
	        var values = "";
	        for( i=0; i < selector.options.length; i++ ) {
	            if (selector.options[i].selected && (selector.options[i].value != "")) {
	                if ( values != "" ) values += ";";
	                values += selector.options[i].value;
	            }
	        }
		  	alert( values );
    	}
	});
	// 地图设置下拉多选2
	$("#s5").dropdownchecklist({
		firstItemChecksAll: true,
		//emptyText: "显示标注类别", 
		icon: { 
			placement: 'right', 
			toOpen: 'fa fa-caret-down', 
			toClose: 'fa fa-caret-up' 
		}, 
		maxDropHeight: 102, 
		width: 120 
	});

	//控制地图显示设置中的下拉框
	$("#myonoffswitch1").click(function(){
		if($(this).attr("checked")=="checked"){
			$(this).removeAttr("checked");
			dropdownDoEnable(false);
		}							
		else{
			$(this).attr("checked","checked");
			dropdownDoEnable(true);
		}
	});

	function dropdownDoEnable( enable ) {
		if ( enable ) {
				$("#s4a").dropdownchecklist("enable");		        
		} else {
				$("#s4a").dropdownchecklist("disable");		        
		}
	}

	</script>
</body>

</html>